<template>
  <div class="container">
    <view class="row-row ">
      <div class=""></div>
      <div class=" previously align-flex row">
        <popup-time :list='selectTimeList' :default="timeIndex" @cancel="onCancel" />
      </div>
    </view>
    <div class="predestination" @click="toPay()">
      <div class="predestination-left">
        <image class="predestination-image" src="/static/achievement-reports-form/payment.png" />
      </div>
      <div class="predestination-row">
        <div class="nomenclature row">
          子弹发薪
          <image class="nomenclature-image" src="/static/achievement-reports-form/more.png" />
        </div>
        <div class="quantum row">
          <div class="quantum-variety">￥</div>
          {{ arr.pay?.amount ? arr.pay?.amount : 0 }}
        </div>
        <div class="bargain row">
          <div class="customer">客户：{{ arr.pay?.customer }}</div>
          <div class="assurance">成交次数：{{ arr.pay?.deal == 0 ? '0' : arr.pay?.deal }}</div>
        </div>
      </div>
    </div>
    <div class="predestination" @click="toDay()">
      <!-- 右边盒子 -->
      <div class="predestination-left">
        <image class="predestination-image" src="/static/achievement-reports-form/daily.png" />
      </div>
      <div class="predestination-row">
        <div class="nomenclature row">
          日日保
          <image class="nomenclature-image" src="/static/achievement-reports-form/more.png" />
        </div>
        <div class="quantum row">
          <div class="quantum-variety">￥</div>
          <view class="quantum-num">
            {{ arr.wesure?.amount || 0 }}
          </view>
        </div>
        <div class="bargain row">
          <div class="customer">客户：{{ arr.wesure?.customer || 0 }}</div>
          <div class="assurance">投保次数：{{ arr.wesure?.wesureFrequency ? arr.wesure?.wesureFrequency : 0 }}</div>
        </div>
      </div>
    </div>
    <div class="predestination" @click="toSecular()">
      <!-- 右边盒子 -->
      <div class="predestination-left">
        <image class="predestination-image" src="/static/achievement-reports-form/secular.png" />
      </div>
      <div class="predestination-row">
        <div class="nomenclature row">
          长期保
          <image class="nomenclature-image" src="/static/achievement-reports-form/more.png" />
        </div>
        <div class="quantum row">
          <div class="quantum-variety">￥</div>
          <view class="quantum-num">
            {{ arr.period?.premium || 0 }}
          </view>
        </div>
        <div class="bargain row">
          <div class="customer">客户：{{ arr.period?.customer || 0 }}</div>
          <div class="assurance">加保次数：{{ arr.period?.addCount || 0 }}</div>
        </div>
      </div>
    </div>
    <div class="predestination" @click="toEle()">
      <div class="predestination-left">
        <image class="predestination-image" src="/static/achievement-reports-form/electron.png" />
      </div>
      <div class="predestination-row">
        <div class="nomenclature row">
          电子签
          <image class="nomenclature-image" src="/static/achievement-reports-form/more.png" />
        </div>
        <div class="quantum row">
          <div class="quantum-variety">￥</div>
          {{ arr.ele?.eleRechargeCount ? arr.ele?.eleRechargeCount : 0 }}
        </div>
        <div class="bargain row">
          <div class="customer">客户：{{ arr.ele?.customer ? arr.ele?.customer : 0 }}</div>
          <div class="assurance">充值次数：{{ arr.ele?.eleCount ? arr.ele?.eleCount : 0 }}</div>
        </div>
      </div>
    </div>
    <!-- 团意日保 -->
    <div class="predestination" @click="toGcpa()">
      <!-- 右边盒子 -->
      <div class="predestination-left">
        <image class="predestination-image" src="/static/achievement-reports-form/gcpa.png" />
      </div>
      <div class="predestination-row">
        <div class="nomenclature row">
          团意日保
          <image class="nomenclature-image" src="/static/achievement-reports-form/more.png" />
        </div>
        <div class="quantum row">
          <div class="quantum-variety">￥</div>
          <view class="quantum-num">
            {{ arr.wesure_tyx?.amount || 0 }}
          </view>
        </div>
        <div class="bargain row">
          <div class="customer">客户：{{ arr.wesure_tyx?.customer || 0 }}</div>
          <div class="assurance">投保次数：{{ arr.wesure_tyx?.wesureFrequency ? arr.wesure_tyx?.wesureFrequency : 0 }}</div>
        </div>
      </div>
    </div>

    <!-- 蛋壳快聘 -->
    <div class="predestination" @click="toGcpa1()">
      <!-- 右边盒子 -->
      <div class="predestination-left">
        <image class="predestination-image" src="/static/achievement-reports-form/eggshell.png" />
      </div>
      <div class="predestination-row">
        <div class="nomenclature row">
          蛋壳快聘
          <!-- <image class="nomenclature-image" src="/static/achievement-reports-form/more.png" /> -->
        </div>
        <div class="quantum row">
          <div class="quantum-variety">￥</div>
          <view class="quantum-num">
            {{ arr.dy?.amount || 0 }}
          </view>
        </div>
        <div class="bargain row">
          <div class="customer"></div>
          <div class="assurance"></div>
        </div>
      </div>
    </div>

    <div class="predestination noAvailable">
      <!-- 右边盒子 -->
      <div class="predestination-left">
        <image class="predestination-image" src="/static/achievement-reports-form/coadjutant.png" />
      </div>
      <div class="predestination-row">
        <div class="nomenclature row">
          企微助手
          <image class="nomenclature-image" src="/static/achievement-reports-form/more.png" />
        </div>
        <div class="quantum row">
          <div class="quantum-variety">￥</div>
          2321
        </div>
        <div class="bargain row">
          <div class="customer">客户：2</div>
          <div class="assurance">投保数：2</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getAchievementReport, GetAchievementReportDto } from '@/api/quick'
import user from '@/utils/user'
import popupTime from '@/components/popup-custom-time/popup-custom-time.vue'
import { share } from '@/utils/share'
// onMounted(async () => {
//   await user.waitLogin()
//   achievementReport()
// })
// 选择时间
const selectTimeList = ref(['昨天', '今天', '本周', '本月', '上月'])
const timeIndex = ref(3)
const cut = ref(0)
const timeOne = ref('')
const timeTwo = ref('')
const startTime = ref('')
const endTime = ref('')
const customIndividual = ref()
onLoad(async () => {
  await user.waitLogin()
  const nowyear = new Date().getFullYear()
  const nowmonth = new Date().getMonth() + 1
  startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
  endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
  share()
  achievementReport()
})
const formatDate = (date: any) => {
  const myyear = date.getFullYear()
  let mymonth = date.getMonth() + 1
  let myweekday = date.getDate()
  if (mymonth < 10) {
    mymonth = "0" + mymonth
  }
  if (myweekday < 10) {
    myweekday = "0" + myweekday
  }
  return (myyear + "-" + mymonth + "-" + myweekday)
}
const onCancel = async (index: { index: number, time: undefined | string }) => {
  timeIndex.value = Number(index.index)
  console.log(index, 'index')
  startTime.value = index.startTime
  endTime.value = index.endTime
  // itemRange.value = index.time
  timeOne.value = index.time?.split(' 至 ')[0] as string
  timeTwo.value = index.time?.split(' 至 ')[1] as string
  achievementReport()
}
const arr = ref({} as GetAchievementReportDto)
const achievementReport = async () => {
  console.log(cut.value, cut, 'cut')
  // 在返回自定义参数时 index 返回 1000  所以以下判断逻辑是 大于800 
  const result = await getAchievementReport({
    startTime: timeIndex.value > 800 ? timeOne.value : startTime.value,
    endTime: timeIndex.value > 800 ? timeTwo.value : endTime.value
  })
  console.log(result, 'achievementReportachievementReport')
  arr.value = result
  console.log(arr, 'arrarr')
}
const toPay = () => {
  uni.navigateTo({
    url: '/packageQuick/pages/score/index'
  })
}

const toDay = () => {
  uni.navigateTo({
    url: '/packageQuick/pages/day-to-day/index'
  })
}

const toSecular = () => {
  uni.navigateTo({
    url: '/packageQuick/pages/long-term-protection/index'
  })
}

const toEle = () => {
  uni.navigateTo({
    url: '/packageQuick/pages/electronic-sign/index'
  })
}
const toGcpa = () => {
  uni.navigateTo({
    url: '/packageQuick/pages/gcpa/index'
  })
}
const toGcpa1 = () => {
  console.log(111);
}
</script>
<style lang="scss" scoped>
.container {
  background: $white;
  min-height: 100vh;
}

.row-row {
  display: flex;
  align-items: center;
  padding: 30rpx;
  justify-content: space-between;
}

.row {
  display: flex;
  align-items: center;
  justify-content: normal;
}

.predestination {
  width: 660rpx;
  height: 254rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin: 0 30rpx 30rpx 70rpx;
  padding-bottom: 30rpx;
  position: relative;

  .predestination-left {
    left: -40rpx;
    position: absolute;
    z-index: 0;
    top: 14rpx;

    .predestination-image {
      width: 150rpx;
      height: 254rpx;
    }
  }

  .predestination-row {
    position: relative;
    z-index: 1;
    margin: 0 auto;
  }
}

.nomenclature {
  justify-content: space-between;
  font-size: $font-normal;
  color: $black;
  padding: 30rpx;

  .nomenclature-image {
    width: 36rpx;
    height: 36rpx;
  }
}

.quantum {
  padding-bottom: 30rpx;
  margin: 0 30rpx 0rpx 30rpx;
  font-size: $font-extra;
  border-bottom: 1rpx solid #f4f4f7;
  align-items: baseline;
  font-weight: 800;

  .quantum-variety {
    font-size: $font-small;
  }

  .quantum-num {
    font-weight: 800;
  }
}

.bargain {
  color: $grey;
  font-size: $font-normal;
  justify-content: space-between;
}

.assurance {
  padding-right: 30rpx;
}

.noAvailable {
  display: none;
}

.previously {
  box-sizing: border-box;
  padding-left: 10rpx;
  font-weight: 400;
}

.in-number {
  font-weight: 400;
  color: $grey;
}

.choices-hour {
  border-radius: 16rpx;
}

.customer {
  border: none;
}

.transverse-down {
  width: 24rpx;
  height: 24rpx;
  margin-left: 8rpx;
}
</style>
